<template>
	<view class="content">
		<view class="lg-con">
			<image src="../../static/logo.jpg" mode="widthFix" class="logo"></image>
			<view class="log-input-con">
				<input  type="number" v-model="formData.mobile" maxlength="11" placeholder="请输入手机号码" class="log-input" :class="formData.mobile ? 'log-input-bind' : ''" />
			</view>
			<view class="log-input-con" >
				<input  type="number" v-model="formData.mobile_code" maxlength="18" placeholder="请输入验证码" class="log-input log-pass" :class="formData.mobile_code ? 'log-pass-bind' : ''" />
				<text @click="send_code">{{countdown}}</text>
			</view>
			
			<button class="log-btn" open-type="getPhoneNumber" @click="mobile_info">登录/注册</button>
			
			<view class="check">
				<label @click="formData.agreement = !formData.agreement"><checkbox class="check-box" ></checkbox>我已阅读并同意</label><navigator url="../my/web?fun=yhxy">《用户协议》</navigator>和<navigator url="../my/web?fun=ysxy">《隐私协议》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const request = require('../../utils/request');
	export default {
		data() {
			return {
				//表单数据
				formData:{
					mobile:'', //手机号
					mobile_code:'', //验证码
					agreement:false, //服务协议
				},
				countdown:'获取验证码', //倒计时名称
				second:60, //倒计时秒数
				timer:null, //倒计时事件
				code_status:false, //获取验证码状态
			}
		},
		onLoad() {
			var that = this;
			// that.init_login_code(); //初始化微信登录code
			// that.get_ip();
			this.is_go();
		},
		methods: {
			/**
			 * 获取验证码
			 */
			send_code:function()
			{
				console.log(this.formData);
				var that = this;
				if(that.code_status == false)
				{
					var mobile = that.formData.mobile;
					if(mobile == ''){
						uni.showToast({
							title:'请输入手机号',
							icon:'none'
						});
						return;
					}
					//网络请求
					request(app.globalData.api_url+'/v1/publics/get_mobile_code', 'POST', {mobile:mobile}).then((res) => {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						});
						if(res.data.code == 0)
						{
							that.code_status = true;
							//倒计时
							that.timer = setInterval(function(){
								that.second -= 1;
								if(that.second > 0)
								{
									that.countdown = that.second+'秒后获取';
								}else
								{
									clearInterval(that.timer);
									that.countdown = '获取验证码';
									that.second = 60;
									that.code_status = false;
								}
							}, 1000);
						}
					});
				}
			},
			
			is_go(){
				// let delg = uni.getStorageSync('user_token');
				// if(delg != null){
				// 	uni.reLaunch({
				// 		url:'/pages/my/my'
				// 	});
				// }
			},
		
			/**
			 * 用户登录
			 */
			mobile_info:function(e)
			{
				// console.log(e);
				var that = this;
					var encryptedData = e.detail.encryptedData;
					var iv = e.detail.iv;
					//执行微信授权登录
					var formData = that.formData;
					formData.encryptedData = encryptedData;
					formData.iv = iv;
					//网络请求
					request(app.globalData.api_url+'/v1/publics/app_login', 'POST', formData).then((res) => {
						if(res.data.code == 0)
						{
							uni.setStorageSync('user_token', res.data.data.token);
							app.globalData.is_login = true;
							console.log('登录状态显示',app.globalData.is_login);
							app.globalData.req_header.token = res.data.data.token;
							// uni.navigateBack({
							// 	delta: 1
							// });
							uni.reLaunch({
								url:'/pages/my/my'
							});
						}else
						{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							});
						}
					});
				}
		}
	}
</script>

<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
/deep/.uni-checkbox-input-checked{
	color: #fff !important;
	background-color: rgb(36,201,107)!important;
	border-color: rgb(36,201,107)!important;
	background-clip: content-box!important;
	box-sizing: border-box;
}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.check{
			font-size: 28rpx;
			margin: 50rpx auto;
			color: $uni-text-color-grey;
			line-height: 40rpx;
			.check-box{
				transform: scale(0.7);
			}
			navigator{
				display: inline-block;
			}
		}
		.lg-con{
			width: 100%;
			margin-top:200rpx;
			text-align: center;
			.logo{
				width:25%;
				border-radius: 50%;
				margin-bottom: 50rpx;
			}
			.log-input-con{
				width: 70%;
				margin:50rpx auto;
				 position: relative;
				 text{
					 width:160rpx;
					 height:60rpx;
					 margin:7rpx 7rpx 0 0;
					 border-radius:30rpx;
					 text-align: center;
					 line-height:60rpx;
					 font-size: 24rpx;
					 display: inline-block;
					 position: absolute;
					 right: 0;
					 top: 0;
					 color: #fff;
					 background-color: $uni-text-color-active;
					 z-index: 99;
				 }
				.log-input{
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 35rpx;
					border:2rpx solid #e5e5e5;
					text-align: left;
					background: url(../../static/phone.png) 25rpx center no-repeat #fff;
					background-size: auto 50%;
					padding-left:70rpx;
					font-size: 28rpx;
				}
				.log-input-bind{
					background: url(../../static/phone-selected.png) 25rpx center no-repeat #fff;
					background-size: auto 50%;
				}
				.log-pass{
					line-height: 70rpx;
					background: url(../../static/password.png) 25rpx center no-repeat #fff;
					background-size: auto 50%;
				}
				.log-pass-bind{
					line-height: 70rpx;
					background: url(../../static/password-selected.png) 25rpx center no-repeat #fff;
					background-size: auto 50%;
				}				
			}
			.log-btn{
				width: 70%;
				color: #fff;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
				background-color: $uni-text-color-active;
				margin-top:80rpx;
				font-size:28rpx;
				z-index: 99;
			}
		}
	}

</style>
